<template>
  <div>
    <div class="open-member">
      <div style="margin-top:15%;">
        <!-- <hd-svg-icon name="hd-zuanshi" slot="left" size="17px" color="#218B98"></hd-svg-icon> -->
        <!-- <span>当前尚未开通居游会员</span> -->
        <img :src="headimg" alt="" style="height:60px;width:60px;border-radius:60px">
        <p style="font-size:14px">{{nickname}}</p>
      </div><br>
      <!-- <yd-button class="open-button" bgcolor="#218B98">立即开通</yd-button> -->
    </div>
    <div class="center-grids">
      <div class="grids-item">
        <router-link :to="{path:'myOrderList'}">
          <div style="margin-top:30px">
            <img src="https://hd-huludao.oss-cn-qingdao.aliyuncs.com/661522136254_.pic.jpg" alt="">
          </div>
          <div>我的订单</div>
        </router-link>
      </div>
      <div class="grids-item">
        <router-link :to="{path:'myFootprint'}">
          <div style="margin-top:30px">
            <img src="https://hd-huludao.oss-cn-qingdao.aliyuncs.com/711522136255_.pic.jpg" alt="">
          </div>
          <div>我的足迹</div>
        </router-link>
      </div>
      <div class="grids-item">
        <router-link :to="{path:'myComplaint'}">
          <div style="margin-top:30px">
            <img src="https://hd-huludao.oss-cn-qingdao.aliyuncs.com/691522136254_.pic.jpg" alt="">
          </div>
          <div>我的投诉</div>
        </router-link>
      </div>
      <div class="grids-item">
        <router-link :to="{path:'myCollection'}">
          <div style="margin-top:30px">
            <img src="https://hd-huludao.oss-cn-qingdao.aliyuncs.com/681522136254_.pic.jpg" alt="">
          </div>
          <div>我的收藏</div>
        </router-link>
      </div>
      <div class="grids-item">
        <router-link :to="{path:'myComment'}">
          <div style="margin-top:30px">
            <img src="https://hd-huludao.oss-cn-qingdao.aliyuncs.com/671522136254_.pic.jpg" alt="">
          </div>
          <div>我的评论</div>
         </router-link>
      </div>
      <div class="grids-item">
        <router-link :to="{path:'myNotesList'}">
          <div style="margin-top:30px">
            <img src="https://hd-huludao.oss-cn-qingdao.aliyuncs.com/701522136254_.pic.jpg" alt="">
          </div>
          <div>我的游记</div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'centerindex',
  data () {
    return {
      nickname: '居游用户',
      headimg: 'https://cardv2.oss-cn-hangzhou.aliyuncs.com/images/images/%E8%91%AB%E8%8A%A6%E5%B2%9Bapp%E7%94%A8%E6%88%B7%E5%A4%B4%E5%83%8F.png'
    }
  },
  mounted: function() {
    this.load();
  },
  methods: {
    load () {
      let that = this;
      // console.log(this.store.get(this.STORECONST.LOGININFO).username);
      var ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        this.isPhone(function (resultinfo) {
          console.log(resultinfo);
          console.log('上面是微信方法里面的inforesult')
          console.log(resultinfo.result.nickname);
          that.nickname = resultinfo.result.nickname;
          console.log('23423143412341' + that.nickname);
          that.headimg = resultinfo.result.headimgurl;
        });
      } else {
        if (this.store.get(this.STORECONST.LOGININFO) == undefined) {
          this.$dialog.alert({mes: '请登录'})
        }
        this.hdAjax({
          url: this.API.getmyinfo,
          method: 'post',
          data: {
            mobile: this.store.get(this.STORECONST.LOGININFO).username
          },
          success: (resultData) => {
            this.res = resultData.data;
            console.log('!~~~~');
            console.log(this.res);
            this.nickname = this.res.nickname + this.store.get(this.STORECONST.LOGININFO).username;
            this.headimg = this.res.headimgurl;
          }
        });
      }
    }
  }
}
</script>

<style scoped>
  .open-member{
    text-align: center;
    width: 100%;
    height: 80px;
    font-size: .25rem;
    color: #218B98;
  }
  .open-button{
    width: 35%;
    /* margin-top: 15px; */
    border-radius: 30px;
  }
  .center-grids{
    width: 100%;
    height: 280px;
    border-top:10px solid #F0F0F0;
    border-bottom:10px solid #F0F0F0;
  }
  .grids-item{
    width:33%;
    height:50%;
    float:left;
    text-align: center;
    font-size: .28rem;
    line-height: 30px;
  }
  .bottom-choose{
    height:200px;
    width:100%;
    margin-top:15px;
  }
  .grids-item-border{
    margin-top:30px;
    height:60px;
    width:60px;
    background-color:#218B98;
    border-radius: 20px;
    padding-top:5px;
    margin-left:25%
  }
</style>
